<script setup>
	import { ref, computed } from 'vue';
	// 计划列表
	const planList = ref([
		{ id: 12, name: '跑步', done: false },
		{ id: 76, name: '看书', done: false },
		{ id: 31, name: '撸码', done: false },
		{ id: 49, name: '追剧', done: false },
	]);

	// 设置全选框的状态 (通过原始数据推出这个数据)
	const checkAll = computed({
		// 获取（js -> html）
		get() {
			// 更新状态
			return planList.value.every((item) => item.done);
		},
		// 设置（html -> js）
		set(val) {
			// 全选/全不选
			planList.value.forEach((v) => (v.done = val));
		},
	});

	// 设置反选
	const onToggle = () => {
		planList.value.forEach((v) => (v.done = !v.done));
	};
</script>
<template>
	<p>
		<span>
			<input type="checkbox" v-model="checkAll" id="all" />
			<label for="all">全选</label>
		</span>
		<button @click="onToggle">反选</button>
	</p>
	<ul>
		<li v-for="item in planList" :key="item.id">
			<input type="checkbox" v-model="item.done" />
			<span :class="{ completed: item.done }">{{ item.name }}</span>
		</li>
	</ul>
</template>
<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	#app {
		width: 400px;
		margin: 100px auto;
		padding: 15px;
		font-size: 18px;
		background: plum;

		p {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 40px;

			button {
				padding: 3px 6px;
			}
		}
	}

	ul {
		list-style: none;

		li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			border-top: 1px solid #ccc;

			span.completed {
				color: #ddd;
				text-decoration: line-through;
			}
		}
	}

	input {
		margin-right: 8px;
	}
</style>
